<template>
  <div class="index" v-cloak ref="container">
    <div class="fixHead">
      <div class="title">
        <router-link :to="'/info'" class="icon-info"
          ><span class="point"></span
        ></router-link>
        <h1>脉客蜂</h1>
        <router-link :to="'/com/edit'" class="rightBtn">创建社群</router-link>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="slider-banner banner">
      <swiper :options="swiperOption">
        <swiper-slide>
          <router-link :to="''">
            <img src="../../assets/images/adver.jpg" />
          </router-link>
        </swiper-slide>
        <swiper-slide>
          <router-link :to="''">
            <img src="../../assets/images/adver.jpg" />
          </router-link>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="mlist">
      <div class="title">我创建的社群</div>
      <div class="item" @click="toDetail">
        <div class="wrap">
          <img class="img" src="../../assets/images/adver.jpg" />
          <div class="cont">
            <div class="top">
              <span class="name">蚂蚁金服</span>
              <span class="small">111111</span>
            </div>
            <div class="middle">每一个认真生活的人，都值得被认真对待</div>
            <div class="bottom">
              <img src="../../assets/images/adver.jpg" />
              <span>麻小云</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item" @click="toDetail">
        <div class="wrap">
          <img class="img" src="../../assets/images/adver.jpg" />
          <div class="cont">
            <div class="top">
              <span class="name">蚂蚁金服</span>
              <span class="small">111111</span>
            </div>
            <div class="middle">每一个认真生活的人，都值得被认真对待</div>
            <div class="bottom">
              <img src="../../assets/images/adver.jpg" />
              <span>麻小云</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mlist">
      <div class="title">我加入的社群</div>
      <div class="item" @click="toDetail">
        <div class="wrap">
          <img class="img" src="../../assets/images/adver.jpg" />
          <div class="cont">
            <div class="top">
              <span class="name">蚂蚁金服</span>
              <span class="small">111111</span>
            </div>
            <div class="middle">每一个认真生活的人，都值得被认真对待</div>
            <div class="bottom">
              <img src="../../assets/images/adver.jpg" />
              <span>麻小云</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height:1.2rem;"></div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";

export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide
  },
  props: {},
  data: function() {
    return {
      banner: [],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 3000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      }
    };
  },
  mounted: function() {},
  methods: {
    toDetail() {
      this.$router.push({
        path: "/com/home",
        query: {
          id: 1
        }
      });
    }
  }
};
</script>
<style scoped>
.index {
  height: 100%;
  background: url(../../assets/images/mkf/indexBg.png) top left no-repeat;
  background-size: 100% auto;
  background-position-y: 0.88rem;
}
</style>
